<script setup lang="ts">
</script>

<template>
  <div class="plan">
    <div class="plan-header"></div>
    <div class="plan-content">
      <div class="plan-item">
        <div class="img ljsq"></div>
        <div class="text">
          <div style="color: #68D3FF">累计申请</div>
          <div ><span class="num">{{ count1 }}</span> 条</div>
        </div>
      </div>
      <div class="plan-item ml20">
        <div class="img ytg"></div>
        <div class="text">
          <div style="color: #00D1B9">已通过</div>
          <div ><span class="num">{{ count2 }}</span> 条</div>

        </div>
      </div>
      <div class="plan-item mt20">
        <div class="img shz"></div>
        <div class="text">
          <div style="color: #FF7734">审核中</div>
          <div ><span class="num">{{ count3 }}</span> 次</div>
        </div>
      </div>
      <div class="plan-item ml20 mt20">
        <div class="img ybh"></div>
        <div class="text">
          <div style="color: #95CFFA">已驳回</div>
          <div ><span class="num">{{ count4 }}</span> 次</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { incrementNumber } from '@/utils/index';
import { ref , onMounted } from 'vue';

const count1 = ref(0);
const count2 = ref(0);
const count3 = ref(0);
const count4 = ref(0);
onMounted(() => {
  // 模拟数据加载
  incrementNumber(989, 900, count1);
  incrementNumber(936, 900, count2);
  incrementNumber(65, 900, count3);
  incrementNumber(17, 900, count4);
});


</script>

<style lang="scss" scoped>
.plan {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/monitor/plan-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 161px;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    .ml20{
      margin-left: 20px;
    }
    .mt20{
      margin-top: 20px;
    }
    .plan-item {
      width: 176px;
      height: 60px;
      display: flex;
      .img {
        width: 60px;
        height: 60px;
      }
      .ljsq {
        background: url('@/assets/monitor/plan/ljsq.svg') 0% 0% / 100% 100% no-repeat;
      }
      .ytg{
        background: url('@/assets/monitor/plan/ytg.svg') 0% 0% / 100% 100% no-repeat;
      }
      .shz{
        background: url('@/assets/monitor/plan/shz.svg') 0% 0% / 100% 100% no-repeat;
      }
      .ybh{
        background: url('@/assets/monitor/plan/ybh.svg') 0% 0% / 100% 100% no-repeat;
      }
      .text{
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        text-align: center;
        .num{
          font-family: YouSheBiaoTiHei;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
